<script setup name="login">
import { ref } from 'vue'
import { Dialog, Toast } from 'vant'
import { betaLogin } from '@/request/api'
import { loginStore } from '@/pinia/modules/login'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = loginStore()
const tel = ref('13357172541')
const digit = ref('123456')
const checked = ref(true)
const phoneErr = ref('')
const authErr = ref('')
const submit = () => {
  if (!tel.value) {
    return Toast('手机号码不能为空')
  }
  if (!digit.value) {
    return Toast('验证码不能为空')
  }
  if (!checked.value) {
    Dialog.alert({
      message: '请选择同意告知书',
      showCancelButton: true
    })
      .then(async () => {
        checked.value = true
        // on close
      })
      .catch(() => {
        // on cancel
        login()
      })
  }
  login()
}
const login = async () => {
  const { code, data } = await betaLogin({
    phone: tel.value,
    code: digit.value,
    type: 2
  })
  if (code === 0) {
    Toast('登录成功')
    // 过期时间
    data.expires = Date.now() + (2 * 60 * 60 - 5 * 60) * 1000
    store.setLoginData(data)
    console.log(store.redirect)
    router.replace(store.redirect)
  } else {
    Toast('登录失败')
  }
}
// 手机号处理
const onBlur = () => {}
</script>
<template>
  <div class="v-login">
    <div class="v-login-box">
      <svg-icon name="vites" color="#0ff" size="6em" />
      <div class="v-login-content">
        <van-field
          v-model="tel"
          type="digit"
          maxlength="11"
          :error-message="phoneErr"
          placeholder="请输入手机号"
          @blur="onBlur"
        />
        <van-field
          v-model="digit"
          type="digit"
          maxlength="6"
          :error-message="authErr"
          placeholder="请输入验证码"
        />
      </div>
      <van-button
        type="primary"
        size="large"
        v-throttle="{ fn: submit, event: 'click', delay: 10 }"
        >登录</van-button
      >
      <div class="v-login-checked">
        <van-checkbox v-model="checked" icon-size="16px"
          >同意告知书</van-checkbox
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.v-login {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  background: #eeeeee;
  .v-login-box {
    width: 90vw;
    margin-top: 100px;
    text-align: center;
    .v-login-content {
      width: 100%;
      height: 90px;
      margin: 60px auto;
      border-radius: 8px;
      overflow: hidden;
    }
    .v-login-checked {
      text-align: left;
      margin-top: 16px;
      font-size: 12px;
      color: #888;
    }
  }
}
</style>
